import {
  ProForm,
  ProFormText,
} from '@ant-design/pro-form';
import {Divider, message} from 'antd';
import React from 'react';
import Footer from '@/components/Footer';
import {history} from 'umi';
import {forceChangePassword} from "@/pages/m/User/Login/service";
import {useEmotionCss} from "@ant-design/use-emotion-css";

const FirstLogin: React.FC = () => {

  // css in js
  const containerStyle = useEmotionCss(()=> {
    return {
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
      overflow: 'auto',
      backgroundImage: "url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg')",
      backgroundSize: '100% 100%',
    }
  })
  // 页面渲染
  return (
    <div className={containerStyle}>
      <div
        style={{
        flex: '1',
        padding: '32px 0',
      }}>
        <ProForm
          onFinish={async (values) => {
            const res = await forceChangePassword({...values});
            if(res && res.status === "done"){
              message.success("密码修改成功，请重新登录！")
              // 清除本地token
              localStorage.clear()
              history.push('login')
              return true;
            }else {
              message.error(res.message);
              return false;
            }
          }}
          style={{minWidth: 328, maxWidth: 500, margin: `0 auto 0 auto`, }}
          submitter={{
            resetButtonProps: {
              hidden: true
            }
          }}
        >
          <Divider style={{marginTop: 180}}>首次登录，请修改密码！</Divider>
          <ProFormText.Password
            name="password1"
            fieldProps={{
              size: 'large',
            }}
            label="新密码"
            rules={[
              {required: true, message: "新密码不可为空！"},
              {min:6, message: "密码至少需要6个字符！"}
            ]}
          />
          <ProFormText.Password
            width="xl"
            fieldProps={{
              size: 'large',
            }}
            name="password2"
            label="确认密码"
            rules={[
              {required: true, message: "新密码不可为空！"},
              {min:6, message: "密码至少需要6个字符！"}
            ]}
          />
        </ProForm>
      </div>
      <Footer />
    </div>
  );
};

export default FirstLogin;
